<template>
	<div style="margin-top: 20px;width: 80%">

		<div>
			<el-row>
				<el-col :span="24" style="margin-bottom: 15px;">
					<el-button type="primary" @click="goBack()">返回
					</el-button>
				</el-col>
			</el-row>
			<div style="border: 1px solid #DCDCDC;background-color: #FFFFFF;">
				<div style="padding: 20px;margin-bottom: 20px;">
					实名认证
					<span v-if="form.openingStatus === 'B'">审核中</span>
					<span style="color: red;" v-if="form.openingStatus === 'L'">平台拒绝</span>
					<span v-if="form.openingStatus === 'P'">平台通过</span>
					<span v-if="form.openingStatus === 'F'">快捷通拒绝</span>
					<span v-if="form.openingStatus === 'S'">通过</span>
				</div>
				<el-form :inline="true" :model="form" class="demo-form-inline">
					<el-form-item label-width="130px" label="姓名：">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="身份证：">
						<el-input v-model="form.certificatesNumber"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="身份证有效期：">
						<el-date-picker v-model="form.certificatesValidity" value-format="yyyy-MM-dd" type="date" @change="getSTime"
						 placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
					<br>
					<el-form-item label-width="130px" label="联系人手机号：">
						<el-input v-model="form.phoneNum"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="联系人邮箱：">
						<el-input v-model="form.email"></el-input>
					</el-form-item>
					<br>
					<el-form-item label-width="130px" label="商家所在地：">
						<el-cascader style="width: 300px;" v-model="addressValue" :options="optionsAddress" @change="handleChangeStoreZone"
						 ref="cascaderStoreAddr"></el-cascader>

					</el-form-item>
					<el-form-item label-width="130px" label="商家详细地址：">
						<el-input v-model="form.address"></el-input>
					</el-form-item>

				</el-form>

			</div>
			<br>
			<div style="border: 1px solid #DCDCDC;background-color: #FFFFFF;">
				<div style="padding: 20px;margin-bottom: 20px;">
					银行卡信息
				</div>
				<el-form :inline="true" :model="form" class="demo-form-inline">
					<el-form-item label-width="130px" label="银行卡户名：">
						<el-input v-model="form.bankAccountName"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="结算银行卡：">
						<el-input v-model="form.bankCardNo"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="选择开户行：">
						<el-select style="width: 190px;" v-model="form.bankName" placeholder="请选择" @change="changeSelect">
							<el-option v-for="item in cardNameList" :key="item.name" :label="item.name" :value="item.name">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label-width="130px" label="开户行编号：">
						<el-input v-model="form.bankCode"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="开户支行名称：">
						<el-input v-model="form.bankBranchName"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="开户行地区：">
						<el-cascader style="width: 300px;" v-model="value" :options="optionsAddress" @change="handleChangeZone" ref="cascaderAddr"></el-cascader>

					</el-form-item>

				</el-form>
			</div>
			<br>
			<div style="border: 1px solid #DCDCDC;background-color: #FFFFFF;">
				<div style="padding: 20px;margin-bottom: 20px;">
					影印件信息
				</div>
				<el-form :inline="true" :model="form" class="demo-form-inline">
					<el-form-item label-width="150px">
						<div style="width: 200px;text-align: center;">
							<p>身份证正面:</p>
							<div style="display: inline-block;text-align: center">
								<we-ui-uploads :images="form.certificatesFront" :maxCount="1" :maxSize="1024*1024" @uploading="uploading4"></we-ui-uploads>
							</div>
						</div>
					</el-form-item>
					<el-form-item label-width="150px">
						<div style="width: 200px;text-align: center;">
							<p>身份证反面:</p>
							<div style="display: inline-block;text-align: center">
								<we-ui-uploads :images="form.certificatesBack" :maxCount="1" :maxSize="1024*1024" @uploading="uploading5"></we-ui-uploads>
							</div>
						</div>
					</el-form-item>


					<!-- <el-form-item>
						<div style="width: 200px;text-align: center;">
							<p>手持身份证正面:</p>
							<div style="display: inline-block;text-align: center">
								<we-ui-uploads :images="form.certificatesInHandFront" :maxCount="1" :maxSize="1024*1024" @uploading="uploading7"></we-ui-uploads>
							</div>
						</div>
					</el-form-item> -->
					<!-- <el-form-item>
						<div style="width: 200px;text-align: center;">
							<p>手持银行卡:</p>
							<div style="display: inline-block;text-align: center">
								<we-ui-uploads :images="form.bankCardInHand" :maxCount="1" :maxSize="1024*1024" @uploading="uploading10"></we-ui-uploads>
							</div>
						</div>
					</el-form-item> -->
					<el-form-item>
						<div style="width: 200px;text-align: center;">
							<p>银行卡包含卡号一面:</p>
							<div style="display: inline-block;text-align: center">
								<!-- <img class="storeVerifyDetailImg" :src="form.bankCardFont" alt=""> -->
								<we-ui-uploads :images="form.bankCardFont" :maxCount="1" :maxSize="1024*1024" @uploading="uploading7"></we-ui-uploads>
							</div>
						</div>
					</el-form-item>



				</el-form>
				<!-- <div style="margin: 10px;">
					<el-button type="primary" @click="submitForm" :disabled="false" :loading="loading">提交审核
					</el-button>
				</div> -->
			</div>
			<div style="border: 1px solid #DCDCDC;margin-top: 20px;">
				<!-- <div style="background: #f5f4f5;padding: 20px;margin-bottom: 20px;">
			快捷通审核资料
		</div>
		<el-form :inline="true" :model="form" class="demo-form-inline">
			<el-form-item label-width="150px">
				<div style="width: 200px;text-align: center;">
					<p>商家官网截图:</p>
					<div style="display: inline-block;text-align: center">
						<we-ui-uploads :images="networdUrlPhotostr" :maxCount="1" :maxSize="1024*1024" @uploading="uploading4"></we-ui-uploads>
					</div>
				</div>
			</el-form-item>
		</el-form> -->

				<div style="display: flex;justify-content: space-between;padding: 30px 70px;border-top: 1px solid #DCDCDC;">
					<div>
						<el-button @click="submitForm" type="primary">确定修改信息</el-button>
					</div>

					<div v-if="form.openingStatus != 'S'">
						<el-button type="success" @click="agree">同意</el-button>
						<!-- <el-button  type="infor" @click="reloadSubmit">重新提交</el-button> -->
						<el-button type="danger" :loading="loading" @click="dialogVisible=true;">拒绝</el-button>
					</div>
				</div>
			</div>
			<br>
			<div style="width: 100%;height: 50px;"></div>


		</div>
		<el-dialog title="拒绝理由" v-model="dialogVisible" size="tiny" style="min-width: 400px">
			<el-form label-width="110px">
				<el-form-item label="拒绝理由：">
					<el-input v-model="refuseReason" class="length_150"></el-input>
				</el-form-item>
			</el-form>
			<div style="text-align: center">
				<el-button type="primary" @click="submit" :disabled="!refuseReason" :loading="loading">保 存
				</el-button>
			</div>

		</el-dialog>

		<div class="weui-gallery" style="display: block;z-index: 9999;" v-show="img.is_preview">
			<span class="weui-gallery__img" :style="{backgroundImage:img.preview_url,transform:img.transform}" @click="hidePreview"></span>
			<div class="weui-gallery__opr white_pointer">
				<div class="weui-gallery__del" @click.prevent="rotate()">
					<img src="../../assets/images/xuanzhuan.png" height="25" width="25">
					<span class="weui-span_del">旋转</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import address from '../../adsAddress.js'
	export default {
		data() {
			return {
				form: {

				},
				dialogVisible: false,
				refuseReason: '',
				img: {
					is_preview: false,
					preview_url: '',
					image_index: null,
					preview_images: [],
					transform: ''
				},
				value: [],
				addressValue: [],
				cardNameList: [{
						"name": "农业银行",
						"code": "ABC"
					},
					{
						"name": "中国银行",
						"code": "BOC"
					},
					{
						"name": "建设银行",
						"code": "CCB"
					},
					{
						"name": "工商银行",
						"code": "ICBC"
					},
					{
						"name": "交通银行",
						"code": "COMM"
					},
					{
						"name": "中信银行",
						"code": "CITIC"
					},
					{
						"name": "光大银行",
						"code": "CEB"
					},
					{
						"name": "华夏银行",
						"code": "HXB"
					},
					{
						"name": "民生银行",
						"code": "CMBC"
					},
					{
						"name": "广东发展银行",
						"code": "GDB"
					},
					{
						"name": "平安银行",
						"code": "SZPAB"
					},
					{
						"name": "招商银行",
						"code": "CMB"
					},
					{
						"name": "兴业银行",
						"code": "CIB"
					},
					{
						"name": "浦东发展银行",
						"code": "SPDB"
					},
					{
						"name": "南京银行",
						"code": "NJCB"
					},
					{
						"name": "宁波银行",
						"code": "NBCB"
					},
					{
						"name": "汉口银行",
						"code": "HKBCHINA"
					},
					{
						"name": "杭州银行",
						"code": "HCCB"
					},
					{
						"name": "广州市商业银行",
						"code": "GZCB"
					},
					{
						"name": "浙江稠州商业银行",
						"code": "CZCB"
					},
					{
						"name": "长沙银行",
						"code": "CSCB"
					},
					{
						"name": "城市商业银行",
						"code": "CITYBANK"
					},
					{
						"name": "上海银行",
						"code": "BOS"
					},
					{
						"name": "北京银行",
						"code": "BCCB"
					},
					{
						"name": "晋城市商业银行",
						"code": "SXJS"
					},
					{
						"name": "温州市商业银行",
						"code": "WZCB"
					},
					{
						"name": "广州市农信社",
						"code": "GNXS"
					},
					{
						"name": "农村商业银行",
						"code": "RCB"
					},
					{
						"name": "顺德农信社",
						"code": "SDE"
					},
					{
						"name": "恒丰银行",
						"code": "EGBANK"
					},
					{
						"name": "浙商银行",
						"code": "CZB"
					},
					{
						"name": "农村合作银行",
						"code": "URCB"
					},
					{
						"name": "渤海银行",
						"code": "CBHB"
					},
					{
						"name": "徽商银行",
						"code": "HSBANK"
					},
					{
						"name": "村镇银行",
						"code": "COUNTYBANK"
					},
					{
						"name": "重庆三峡银行",
						"code": "CCQTGB"
					},
					{
						"name": "上海农村商业银行",
						"code": "SHRCB"
					},
					{
						"name": "城市信用合作社",
						"code": "UCC"
					},
					{
						"name": "北京农商行",
						"code": "BJRCB"
					},
					{
						"name": "珠海市农村信用合作社",
						"code": "ZHNX"
					},
					{
						"name": "尧都信用合作联社",
						"code": "YDXH"
					},
					{
						"name": "深圳农村商业银行",
						"code": "SNXS"
					},
					{
						"name": "农村信用合作社",
						"code": "RCC"
					},
					{
						"name": "湖南农信社",
						"code": "HNNXS"
					},
					{
						"name": "中国邮储银行",
						"code": "PSBC"
					},
					{
						"name": "浙江省农村信用社联合社",
						"code": "ZJRC"
					},
					{
						"name": "河南农村信用社",
						"code": "HNNX"
					},
					{
						"name": "江苏农村信用社联合社",
						"code": "JSNX"
					},
					{
						"name": "吉林省农村信用社",
						"code": "JLNLS"
					},
					{
						"name": "河北省农村信用社",
						"code": "HEBNX"
					},
					{
						"name": "内蒙古农村信用社",
						"code": "NMGNXS"
					},
					{
						"name": "辽宁省农村信用社",
						"code": "LNRCC"
					},
					{
						"name": "云南省农村信用社",
						"code": "YNRCC"
					},
					{
						"name": "湖北农村信用社",
						"code": "HBXH"
					},
					{
						"name": "广东农村信用社",
						"code": "GDRC"
					},
					{
						"name": "海南省农村信用社",
						"code": "HNB"
					},
					{
						"name": "山西农村信用社",
						"code": "SXRCU"
					},
					{
						"name": "安徽农村信用社联合社",
						"code": "AHRCU"
					},
					{
						"name": "山东省农村信用社",
						"code": "SDNXS"
					},
					{
						"name": "四川农村信用社",
						"code": "SCRCU"
					},
					{
						"name": "广西农村信用社",
						"code": "GXNXS"
					},
					{
						"name": "陕西农村信用社",
						"code": "SXNXS"
					},
					{
						"name": "福建农村信用社",
						"code": "FJNX"
					},
					{
						"name": "江西农村信用社",
						"code": "JXNXS"
					},
					{
						"name": "贵州农信社",
						"code": "GZRCU"
					},
					{
						"name": "黑龙江农村信用社",
						"code": "HLJRCC"
					},
					{
						"name": "新疆农信社",
						"code": "XJRCCB"
					},
					{
						"name": "青海农信社",
						"code": "QHRCCB"
					},
					{
						"name": "甘肃省农村信用社",
						"code": "GSRCU"
					},
					{
						"name": "浙江民泰商业银行",
						"code": "MTB"
					},
					{
						"name": "哈尔滨银行",
						"code": "HRBCB"
					},
					{
						"name": "中原银行",
						"code": "ZYB"
					},
					{
						"name": "贵阳银行",
						"code": "GYB"
					},
					{
						"name": "郑州银行",
						"code": "ZZBANK"
					},
					{
						"name": "成都银行",
						"code": "BOCD"
					},
					{
						"name": "重庆银行",
						"code": "CQCBANK"
					},
					{
						"name": "青岛银行",
						"code": "QDB"
					},
				],
				storeId: '',
				optionsAddress: address(),
				loading: false,
				networdUrlPhotostr: [],
			}
		},
		created() {
			this.storeId = this.$route.query.id
			this.fetchData()
		},
		methods: {
			fetchData() {
				let vm = this
				let data = {
					storeId: vm.storeId
				}
				this.dataApi.ajax('singleStore', data, res => {
					if (res.responseType === 'S') {
						vm.form = res
						console.log(res)
						if (vm.form.bankCardFont != undefined && vm.form.bankCardFont != '') {
							let bankCardFontstr = vm.form.bankCardFont
							let bankCardFontarr = bankCardFontstr.split(',')
							vm.form.bankCardFont = bankCardFontarr
						} else {
							vm.form.bankCardFont = []
						}
						if (vm.form.bankCardInHand != undefined && vm.form.bankCardInHand != '') {
							let bankCardInHandstr = vm.form.bankCardInHand
							let bankCardInHandarr = bankCardInHandstr.split(',')
							vm.form.bankCardInHand = bankCardInHandarr
						} else {
							vm.form.bankCardInHand = []
						}
						if (vm.form.certificatesInHandFront != undefined && vm.form.certificatesInHandFront != '') {
							let certificatesInHandFrontstr = vm.form.certificatesInHandFront
							let certificatesInHandFrontarr = certificatesInHandFrontstr.split(',')
							vm.form.certificatesInHandFront = certificatesInHandFrontarr
						} else {
							vm.form.certificatesInHandFront = []
						}

						if (vm.form.certificatesBack != undefined && vm.form.certificatesBack != '') {
							let certificatesBackstr = vm.form.certificatesBack
							let certificatesBackarr = certificatesBackstr.split(',')
							vm.form.certificatesBack = certificatesBackarr
						} else {
							vm.form.certificatesBack = []
						}
						if (vm.form.certificatesFront != undefined && vm.form.certificatesFront != '') {
							let certificatesFrontstr = vm.form.certificatesFront
							let certificatesFrontarr = certificatesFrontstr.split(',')
							vm.form.certificatesFront = certificatesFrontarr
						} else {
							vm.form.certificatesFront = []
						}
						vm.getAddressCode()
						vm.getStoreAddressCode()
					}
				});
			},
			uploading4(f) {

				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});

			},
			uploading5(f) {

				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});

			},
			uploading6(f) {

				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});

			},
			uploading10(f) {

				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});

			},
			uploading7(f) {

				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});

			},

			hidePreview() {
				this.img.is_preview = false;
				this.img.preview_url = null;
				this.img.image_index = null;
				this.img.preview_images = [];
				this.img.transform = '';
			},
			getSTime(val) {
				this.form.certificatesValidity = val
			},
			handleChangeZone(e) {

				let str = this.$refs['cascaderAddr'].currentLabels.toString()
				str = str.replace(/,/g, "")
				this.form.bankProvince = str
			},
			handleChangeStoreZone(e) {
				let str = this.$refs['cascaderStoreAddr'].currentLabels.toString()
				// str = str.replace(/,/g, "")
				str = str.split(',')
				console.log(str)
				this.form.province = str[0]
				this.form.city = str[1]
				this.form.area = str[2]
			},
			getAddressCode() {
				var vm = this
				let arrAddress = []
				vm.optionsAddress.forEach(item => {
					if (item.label == vm.form.bankProv) {
						arrAddress[0] = item.value
						item.children.forEach(ite => {
							if (ite.label == vm.form.bankCity) {
								arrAddress[1] = ite.value
								vm.value = arrAddress
							}
						})
					}
				})

			},
			getStoreAddressCode() {
				var vm = this
				let arrAddress = []
				vm.optionsAddress.forEach(item => {
					if (item.label == vm.form.province) {
						arrAddress[0] = item.value
						item.children.forEach(ite => {
							if (ite.label == vm.form.city) {
								arrAddress[1] = ite.value
								ite.children.forEach(areaItem => {
									if (areaItem.label == vm.form.area) {
										arrAddress[2] = areaItem.value
										vm.addressValue = arrAddress
									}
								})

							}
						})
					}
				})

			},
			changeSelect(e) {
				console.log(e)
				this.cardNameList.forEach(item => {
					if (item.name == e) {
						this.form.bankCode = item.code
					}
				})
			},
			submitForm() {
				if (this.form.certificatesFront.length == 0) {
					this.showMsg('请上传法人身份证正面图片', 'warning')
					return false;
				}
				if (this.form.certificatesBack.length == 0) {
					this.showMsg('请上传法人身份证反面图片', 'warning')
					return false;
				}

				let data = generateObj(this.form)
				data.bankCardFont = data.bankCardFont.toString()
				data.certificatesBack = data.certificatesBack.toString()
				data.certificatesFront = data.certificatesFront.toString()
				data.bankCardInHand = data.bankCardInHand.toString()
				data.certificatesInHandFront = data.certificatesInHandFront.toString()
				this.loading = true
				console.log(data, '提交保存信息')
				this.dataApi.ajax('storeEdit', data, res => {
					if (res.responseType === 'S') {
						this.showMsg('保存成功')
						this.loading = false
						this.goBack()
					}
				});

			},
			agree() {
				this.submit()
				// this.loading = true

				// this.dataApi.ajax('platformPreliminaryTrial', {
				// 	storeId: this.form.storeId,
				// 	applyStat: 2,
				// }, res => {
				// 	if (res.responseType === 'S') {
				// 		this.loading = false
				// 		this.showMsg("通过成功")
				// 		this.newBusinessLicense = []
				// 		this.fetchData();
				// 	}else{
				// 		this.loading = false
				// 	}
				// })
			},
			submit() {
				this.dataApi.ajax('platformMarkerRegistration', {
					storeId: this.form.storeId,
					applyStat: 2,
				}, res => {
					if (res.responseType === 'S') {
						this.loading = false
						this.showMsg("通过成功")
						this.newBusinessLicense = []
						this.fetchData();
					}
				})
			},
		}
	}
</script>

<style>
	.storeVerifyDetailImg {
		width: 80px;
	}
</style>
